<template>
  <div class="customs">
    <h1 class="title">海关数据</h1>
    <div class="middle">
      <el-row :gutter="20">
        <el-col :span="3">
          <el-select v-model="country" placeholder="请选择" size="small">
            <el-option
              v-for="item in countryList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="13">
          <el-input style="background-color: #fff" size="small" v-model="searchContent"
                    placeholder="输入HS编码 / 公司 / 产品"></el-input>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" size="small">搜 索</el-button>
          <el-button type="primary" size="small" @click="visible=!visible">筛 选</el-button>
        </el-col>
      </el-row>
      <!-- 筛选框-->
      <div class="screening" v-show="visible">
        <el-form :model="form" ref="form" label-width="90px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item class="filter-item" label="采购商：" prop="buyer">
                <el-input placeholder="请输入商户名称或商户编号" v-model="form.buyer" size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item class="filter-item" label="采购国家" prop="buyerCountry">
                <el-select v-model="form.buyerCountry" placeholder="请选择国家" size="mini">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item class="filter-item" label="供应商：" prop="seller">
                <el-input placeholder="请输入商户名称或商户编号" v-model="form.seller" size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item class="filter-item" label="供应国家" prop="sellerCountry">
                <el-select v-model="form.sellerCountry" placeholder="请选择国家" size="mini">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item class="filter-item" label="开始时间：" prop="startTime">
                <el-date-picker size="mini"
                                v-model="form.startTime" style="width: 150px"
                                type="date" value-format="yyyy-MM-dd"
                                class="datepicker"
                                placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item class="filter-item" label="结束时间" prop="endTime">
                <el-date-picker size="mini"
                                v-model="form.endTime" style="width: 150px"
                                type="date" value-format="yyyy-MM-dd"
                                class="datepicker"
                                placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="btn-group">
          <el-button size="mini" @click="visible=false">取 消</el-button>
          <el-button size="mini" @click="$refs.form.resetFields()">重 置</el-button>
          <el-button type="primary" size="mini">查 询</el-button>
        </div>
      </div>
    </div>
    <!--菜单栏-->
    <el-tabs v-model="activeName">
      <el-tab-pane label="海关数据" name="first">
        <CustomsData></CustomsData>
      </el-tab-pane>
      <el-tab-pane label="采购商" name="second">
        <Buyer></Buyer>
      </el-tab-pane>
      <el-tab-pane label="供应商" name="third">
        <Seller></Seller>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
    //获取国家列表
    import {queryCountry} from '@/api/common/Dictionaries'
    import CustomsData from "@/components/ocean/CustomsData";
    import Buyer from "@/components/ocean/Buyer";
    import Seller from "@/components/ocean/Seller";

    export default {
        name: "customs",
        components: {CustomsData, Buyer, Seller},
        data() {
            return {
                country: '',
                searchContent: '',
                countryList: [],
                activeName: 'first',
                form: {
                    buyer: '',
                    buyerCountry: '',
                    seller: '',
                    sellerCountry: '',
                    startTime: '',
                    endTime: '',
                },
                visible:false
            }
        },
        methods: {
        }
    }
</script>

<style lang="scss">
  .customs {
    background-color: white;
    border-radius: 10px 10px 0 0;
    padding: 15px 50px 10px 20px;
    height: 100%;
    min-height: 760px;

    .el-tabs__header {
      padding-left: 0 !important;
    }

    .el-tabs__item {
      padding: 0 40px;
    }

    .title {
      font-size: 18px;
      color: #435B77;
      font-weight: 600;
      margin-bottom: 30px;
    }

    .middle {
      position: relative;
      margin-bottom: 30px;

      .screening {
        position: absolute;
        right: 18.5%;
        top: 44px;
        z-index: 999;
        width: 500px;
        padding: 10px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.1);
        border-radius: 10px;

        .btn-group {
          text-align: center;

          .el-button + .el-button {
            margin-left: 27px;
          }
        }
      }
    }
  }

  @media screen and (min-width: 1250px) {
    .customs {
      min-height: 800px;
    }
  }
</style>
